{% extends "base.html" %}

{% block title %}数据上传 - SurveyAnalyzer{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ url_for('main.index') }}">
                <i class="fas fa-home me-1"></i>
                首页
            </a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            <i class="fas fa-upload me-1"></i>
            数据上传
        </li>
    </ol>
</nav>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0">
                    <i class="fas fa-upload me-2"></i>
                    上传数据文件
                </h4>
            </div>
            <div class="card-body">
                <form method="post" enctype="multipart/form-data" id="uploadForm">
                    <div class="mb-4">
                        <label for="file" class="form-label">选择数据文件</label>
                        <div class="upload-area" id="uploadArea">
                            <input type="file" class="form-control" id="file" name="file" accept=".csv,.xlsx,.xls,.json" required>
                            <div class="upload-text">
                                <i class="fas fa-cloud-upload-alt fa-3x mb-3"></i>
                                <p class="mb-2">点击选择文件或拖拽文件到此处</p>
                                <small class="text-muted">支持 CSV、Excel、JSON 格式，最大 16MB</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="alert alert-info">
                            <h6><i class="fas fa-info-circle me-2"></i>支持的文件格式：</h6>
                            <ul class="mb-0">
                                <li><strong>CSV文件</strong>：逗号分隔值文件</li>
                                <li><strong>Excel文件</strong>：.xlsx 或 .xls 格式</li>
                                <li><strong>JSON文件</strong>：结构化数据文件</li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{{ url_for('main.index') }}" class="btn btn-secondary me-md-2">
                            <i class="fas fa-arrow-left me-1"></i>
                            返回首页
                        </a>
                        <button type="submit" class="btn btn-primary" id="uploadBtn">
                            <i class="fas fa-upload me-1"></i>
                            上传并分析
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 示例数据 -->
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-lightbulb me-2"></i>
                    示例数据
                </h5>
            </div>
            <div class="card-body">
                <p>如果您没有数据文件，可以下载我们的示例数据进行测试：</p>
                <div class="row">
                    <div class="col-md-6 mb-2">
                        <a href="#" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-download me-1"></i>
                            下载问卷调查示例
                        </a>
                    </div>
                    <div class="col-md-6 mb-2">
                        <a href="#" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-download me-1"></i>
                            下载客户数据示例
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.upload-area {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    background: #f8f9fa;
}

.upload-area:hover {
    border-color: #007bff;
    background: #e3f2fd;
}

.upload-area.dragover {
    border-color: #007bff;
    background: #e3f2fd;
    transform: scale(1.02);
}

.upload-area input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-text {
    pointer-events: none;
}

.upload-area.has-file {
    border-color: #28a745;
    background: #d4edda;
}

.upload-area.has-file .upload-text {
    color: #155724;
}
</style>

<script>
// 文件上传交互
document.addEventListener('DOMContentLoaded', function() {
    const uploadArea = document.getElementById('uploadArea');
    const fileInput = document.getElementById('file');
    const uploadBtn = document.getElementById('uploadBtn');
    
    // 拖拽事件
    uploadArea.addEventListener('dragover', function(e) {
        e.preventDefault();
        uploadArea.classList.add('dragover');
    });
    
    uploadArea.addEventListener('dragleave', function(e) {
        e.preventDefault();
        uploadArea.classList.remove('dragover');
    });
    
    uploadArea.addEventListener('drop', function(e) {
        e.preventDefault();
        uploadArea.classList.remove('dragover');
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            updateUploadArea();
        }
    });
    
    // 文件选择事件
    fileInput.addEventListener('change', updateUploadArea);
    
    function updateUploadArea() {
        const file = fileInput.files[0];
        if (file) {
            uploadArea.classList.add('has-file');
            uploadArea.querySelector('.upload-text p').textContent = `已选择: ${file.name}`;
            uploadArea.querySelector('.upload-text small').textContent = `文件大小: ${(file.size / 1024 / 1024).toFixed(2)} MB`;
        } else {
            uploadArea.classList.remove('has-file');
            uploadArea.querySelector('.upload-text p').textContent = '点击选择文件或拖拽文件到此处';
            uploadArea.querySelector('.upload-text small').textContent = '支持 CSV、Excel、JSON 格式，最大 16MB';
        }
    }
    
    // 表单提交
    document.getElementById('uploadForm').addEventListener('submit', function(e) {
        uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>上传中...';
        uploadBtn.disabled = true;
    });
});
</script>
{% endblock %}